import { Input, List, Row, Col, Button, Upload } from "antd";
import { InboxOutlined } from '@ant-design/icons';
import styles from './index.less';
import { useState } from 'react';
import { useRequestHandle } from '@/utils/utils';
import { getDirectory, backup } from '../service';
import { useUpdateEffect } from '@umijs/hooks';
import { message } from "antd";

export default (props) => {
    const { record, onSuccess, onCancel } = props;
    const { Dragger } = Upload;
    console.log(record);
    const uploadProps = {
        name: 'file',
        multiple: false,
        action: `${record?.agentServer?.agentAddress + record.uploadPath}?serverName=${record.serverName}`,
        onChange(info) {
            const { status } = info.file;
            if (status !== 'uploading') {
                console.log(info.file, info.fileList);
            }
            if (status === 'done') {
                message.success(`${info.file.name} file uploaded successfully.`);
            } else if (status === 'error') {
                message.error(`${info.file.name} file upload failed.`);
            }
        },
        onDrop(e) {
            console.log('Dropped files', e.dataTransfer.files);
        },
    };

    return <div>
        <Row gutter={[12]} style={{ marginBottom: "10px" }} justify={"end"}>
            <Col>
                <Button

                    onClick={() => {
                        onSuccess();
                    }}
                    type="primary">
                    确认/下一步
                </Button>

            </Col>

        </Row>
        <Dragger {...uploadProps}>
            <p className="ant-upload-drag-icon">
                <InboxOutlined />
            </p>
            <p className="ant-upload-text">点击上传或拖拽到此处上传</p>
            <p className="ant-upload-hint">
                当前仅支持上传zip文件
            </p>
        </Dragger>
    </div>
}